<template>
    <q-page>
        <q-card>
            <q-item class='full-width q-pa-md'>
                <q-item-side :avatar="this.account.avatar" />
                <q-item-main>
                    <q-item-tile label>
                        {{this.account.name}} {{this.account.douyinid}}
                    </q-item-tile>
                    <div class="q-mt-sm">
                        <q-chip class="q-mr-xs" dense>作品：{{formatNumbers(this.account.videoCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>获赞：{{formatNumbers(this.account.upAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>粉丝：{{formatNumbers(this.account.fanCount)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>评论：{{formatNumbers(this.account.commentAva)}}</q-chip>
                        <q-chip class="q-mr-xs" dense>转发：{{formatNumbers(this.account.shareAva)}}</q-chip>
                    </div>
                </q-item-main>
                <!-- <q-item-side>
                    <q-toggle
                        v-model="showUnModified"
                        checked-icon="check"
                        color="green"
                        dense
                        @input="filterOnlyUnmodified"
                    />
                </q-item-side> -->
            </q-item>
        </q-card>
        <q-infinite-scroll :handler="loadMoreArtical" ref="scroll">
            <q-list separator>
                <q-item 
                    v-for="(item,idx) in this.list" 
                    :key="item.vid + idx"
                    @click.native="onClickItem(item)"
                >
                    <q-item-side><img style="width: 60px;" :src="item.vpic"></q-item-side>
                    <q-item-main class="col-md">
                        <q-item-tile label>{{item.title}}</q-item-tile>
                        <q-item-tile sublabel class="q-size-xs">{{item.publishTime}}</q-item-tile>
                        <div class="full-width q-mt-sm">
                            <q-chip class="q-mr-sm" dense icon="mdi-cards-heart">
                                {{formatNumbers(item.upCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-comment-processing">
                                {{formatNumbers(item.commentCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-share">
                                {{formatNumbers(item.shareCount)}}
                            </q-chip>
                            <q-chip class="q-mr-sm" dense icon="mdi-clock">
                                {{formatSeconds(item.duration)}}
                            </q-chip>
                        </div>
                    </q-item-main>
                    <q-item-side v-if="isMobile">
                        <q-btn 
                            class="q-mr-sm"
                            right dense outline
                            icon="mdi-eye" label="预览" color='orange-8'
                            :href="item.vurl" target="_blank" type='a'
                            @click.stop
                        />
                    </q-item-side>
                    <q-item-side right icon="mdi-chevron-right" v-else />
                    <!-- <q-item-side>
                        <q-toggle
                            v-model="item.modified"
                            checked-icon="check"
                            color="green"
                            dense
                            @input="changeModified(item)"
                        />
                    </q-item-side> -->
                    <q-btn 
                        class="deletebutton q-mr-sm"
                        right dense flat
                        icon="delete_outline" label="删除" color='grey-8'
                        @click.stop.prevent="deleteVideos(item)"
                    />
                </q-item>
            </q-list>
        </q-infinite-scroll>
        <q-modal class="drawer_video" v-model="showModal" :position="$q.platform.is.mobile?'':'right'" :maximized="$q.platform.is.mobile">
            <q-btn 
                class="copyLink" 
                color='primary' 
                label="复制连接" 
                v-clipboard:copy="this.videoUrl" 
                v-clipboard:success="onCopy"
            />
            <div class="preview_frame">
                <iframe :src="this.videoUrl" scrolling="no" id="showIframe" />
            </div>
        </q-modal>
    </q-page>
</template>

<script>
export default {
    name: 'PageOfficalAccount',
    data() {
        return {
            isMobile: false,
            account: {},
            list: [],
            accountid: this.$route.params.id,
            articals: [],
            limit: 50,
            filter: '',
            accounttags: [],
            showModal: false,
            videoUrl: 'about:blank'
        }
    },
    mounted(){
        // this.loadModel(this.$route.params.id);
        this.$api.ui.pageBackBtn = () => {
            this.$router.push('/douyinmcn/accounts');
        }
        this.getCurrentAccount()
        this.isMobile = this.$q.platform.is.mobile
    },
    methods: {
        formatSeconds( number ) {
            if( !number ){
                return '00:00'
            }
            let second = Math.round( number / 1000 )
            let min = Math.floor( second / 60 )
            let sec = second % 60
            min = `0${min}`.slice( -2 )
            sec = `0${sec}`.slice( -2 )
            
            return `${min}:${sec}`
        },
        onCopy() {
            this.$q.notify({
                message: '复制成功', 
                position: 'top',
                color: 'green',
                timeout: 1000
            })  
        },
        getCurrentAccount(){
            this.$api.douyin.getAccounts( data => {
                let localAccounts = [...data]
                let account = localAccounts.filter( item => {
                    return item.userid == this.$route.params.id
                })
                if( account.length ) {
                    this.account = account[0]
                    this.getVideos()
                    this.$api.ui.pageTitle = this.account.name
                }
            }) 
        },
        getVideos(page, limit){
            let { userid, caasid } = this.account
            this.$api.douyin.getVideos( caasid, 1, limit, data => {
                this.list = [...data]
            })
        },
        formatNumbers( num ){
          let number = '' + num
          let showStr = ''
          if ( number > 9999  ){
              showStr = Math.floor(number /  10000) + 'w+'
          } else if ( number > 999 && number < 10000){
              showStr = Math.floor(number / 1000 ) + 'k+'
          } else {
              showStr = number
          }

          return showStr
        },
        loadMoreArtical(page, done){
            // this.$api.offical.loadArticals( this.accountid, page, data => {
            //     this.articals.push( ...data )
            //     done( data.length < this.limit )
            // })
        },
        filterResult( val ){
            console.log( val )
            this.filter = val
        },
        onClickItem( item ){
            if ( this.isMobile){
                return
            }
            let { vurl } = item
            console.log( vurl )
            this.showModal = true
            this.videoUrl = vurl + '#pageletReflowVideo'
            // let iframeWindow = document.querySelector("#showIframe").contentWindow;
            // console.log( 'iframeWindow::', iframeWindow.body[0] )
            // iframeWindow.scrollTo( -275, 0);
        },
        deleteVideos( item ) {
            let { id, caasid } = item;
            //   console.log( this.$q.dialog )
            let _dialog = this.$q
            .dialog({
                dark: true,
                title: "确认",
                message: "确认删除该视频吗？",
                cancel: "取消",
                ok: "确认删除",
                persistent: true
            })
            .then(() => {
                this.$api.douyin.deleteVideos(id, () => {
                    for (let i = 0; i < this.list.length; i++) {
                        let _localItem = this.list[i];
                        if (_localItem.id == id) {
                            this.list.splice(i, 1);
                            this.$q.notify({
                                message: "删除成功",
                                position: "center",
                                timeout: 1500,
                                color: "negative"
                            });
                            break;
                        }
                    }
                });
            })
            .catch(() => {
                console.log("cancel");
            });
        }
    }
}
</script>

<style>
.preview_frame{
    width: 925px;
    overflow: hidden;
    height: 600px;
    margin-left: -275px;
}
.preview_frame iframe{
    background: #0E0F1A;
    border: none;
    height: 100%;
    width: 100%;
}
</style>